<template>
  <div class="solar-system-container">
    <!-- SVG 太阳系可视化 -->
    <svg 
      class="solar-system-svg"
      :width="svgWidth"
      :height="svgHeight"
      :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
    >
      <!-- 背景星空效果 -->
      <defs>
        <pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
          <circle cx="20" cy="20" r="1" fill="white" opacity="0.8"/>
          <circle cx="80" cy="40" r="0.5" fill="white" opacity="0.6"/>
          <circle cx="40" cy="70" r="0.8" fill="white" opacity="0.7"/>
          <circle cx="90" cy="90" r="0.3" fill="white" opacity="0.5"/>
          <circle cx="10" cy="50" r="0.6" fill="white" opacity="0.9"/>
        </pattern>
      </defs>
      
      <!-- 星空背景 -->
      <rect width="100%" height="100%" fill="url(#stars)" opacity="0.3"/>
      
      <!-- 轨道 -->
      <Orbit
        v-for="planet in PLANETS"
        :key="planet.name"
        :centerX="centerX"
        :centerY="centerY"
        :radius="planet.orbitRadius"
      />
      
      <!-- 太阳 -->
      <Sun
        :centerX="centerX"
        :centerY="centerY"
        @click="handleSunClick"
      />
      
      <!-- 行星 -->
      <Planet
        v-for="planet in PLANETS"
        :key="planet.name"
        :planetData="planet"
        :currentTime="currentTime"
        :animationSpeed="animationSpeed"
        :centerX="centerX"
        :centerY="centerY"
        @planet-click="handlePlanetClick"
      />
    </svg>
    
    <!-- 控制面板 -->
    <ControlPanel
      :isPlaying="isPlaying"
      :animationSpeed="animationSpeed"
      @play="startAnimation"
      @pause="pauseAnimation"
      @reset="resetAnimation"
      @speed-change="handleSpeedChange"
    />
    
    <!-- 行星信息弹窗 -->
    <PlanetInfo
      :isVisible="showPlanetInfo"
      :planetData="selectedPlanet"
      @close="closePlanetInfo"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import Sun from './Sun.vue';
import Planet from './Planet.vue';
import Orbit from './Orbit.vue';
import ControlPanel from './ControlPanel.vue';
import PlanetInfo from './PlanetInfo.vue';
import { PLANETS, SUN_DATA } from '../data/planets';
import type { PlanetData } from '../types';

// 响应式数据
const isPlaying = ref(false);
const animationSpeed = ref(1);
const currentTime = ref(0);
const selectedPlanet = ref<PlanetData | null>(null);
const showPlanetInfo = ref(false);
const animationId = ref<number | null>(null);

// SVG 尺寸
const svgWidth = ref(800);
const svgHeight = ref(600);

// 中心点
const centerX = computed(() => svgWidth.value / 2);
const centerY = computed(() => svgHeight.value / 2);

// 动画控制方法
const startAnimation = () => {
  if (!isPlaying.value) {
    isPlaying.value = true;
    animationLoop();
  }
};

const pauseAnimation = () => {
  isPlaying.value = false;
  if (animationId.value) {
    cancelAnimationFrame(animationId.value);
    animationId.value = null;
  }
};

const resetAnimation = () => {
  pauseAnimation();
  currentTime.value = 0;
};

const handleSpeedChange = (speed: number) => {
  animationSpeed.value = speed;
};

// 动画循环
const animationLoop = () => {
  if (isPlaying.value) {
    currentTime.value += 16; // 约60fps
    animationId.value = requestAnimationFrame(animationLoop);
  }
};

// 事件处理
const handleSunClick = (sunData: typeof SUN_DATA) => {
  selectedPlanet.value = {
    name: sunData.name,
    nameCn: sunData.nameCn,
    color: sunData.color,
    radius: sunData.radius,
    orbitRadius: 0,
    orbitPeriod: 0,
    initialAngle: 0,
    realData: {
      diameter: sunData.realData.diameter,
      distanceFromSun: '0 km (中心)',
      orbitalPeriod: '不适用',
      rotationPeriod: '25-35 地球日'
    }
  };
  showPlanetInfo.value = true;
};

const handlePlanetClick = (planet: PlanetData) => {
  selectedPlanet.value = planet;
  showPlanetInfo.value = true;
};

const closePlanetInfo = () => {
  showPlanetInfo.value = false;
  selectedPlanet.value = null;
};

// 响应式尺寸调整
const updateSize = () => {
  const container = document.querySelector('.solar-system-container');
  if (container) {
    const rect = container.getBoundingClientRect();
    svgWidth.value = Math.max(800, rect.width);
    svgHeight.value = Math.max(600, rect.height);
  }
};

// 生命周期
onMounted(() => {
  updateSize();
  window.addEventListener('resize', updateSize);
  
  // 自动开始动画
  setTimeout(() => {
    startAnimation();
  }, 1000);
});

onUnmounted(() => {
  pauseAnimation();
  window.removeEventListener('resize', updateSize);
});
</script>

<style scoped>
.solar-system-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0c0c0c 70%);
}

.solar-system-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .solar-system-container {
    height: 100vh;
  }
}

@media (max-width: 480px) {
  .solar-system-svg {
    min-height: 400px;
  }
}
</style>